<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
			}
			
			#main {
				width: 810px;
			}
			
			#left {
				width: 300px;
				height: 800px;
				border: 1px solid;
				overflow: hidden;
				float: left;
			}
			
			#right {
				width: 500px;
				height: 800px;
				border: 1px solid;
				float: left;
			}
			
			.flist {
				padding: 10px 50px;
				width: 200px;
				height: 50px;
				line-height: 25px;
				overflow: hidden;
			}
			
			.flist:hover {
				background-color: #cccccc;
				cursor: pointer;
			}
			
			#ul {
				width: 200px;
				list-style-type: none;
				margin: 10px 40px;
			}
			
			#ul li {
				float: left;
				width: 98px;
				text-align: center;
				border: 1px solid;
			}
			
			#ul li.active {
				background-color: #CCCCCC;
			}
			
			.clear {
				clear: both;
			}
			
			#item>div {
				display: none;
			}
			
			#item div.active {
				display: block;
			}
			
			#right>div>p {
				margin: 5px 10px;
				text-align: center;
				border-bottom: 1px solid #CCCCCC;
			}
			
			.right_talking {
				height: 600px;
				margin: 10px;
				border: 1px solid #CCCCCC;
			}
			
			#right_area {
				margin: 10px;
			}
			
			.sendmsg {
				float: right;
				margin: 10px 5px;
				clear: both;
				border: 1px solid #CCCCCC;
			}
			
			.shou {
				margin: 10px 5px;
				clear: both;
				border: 1px solid #CCCCCC;
			}
		</style>
	</head>

	<body>
		<div id="main">

			<div id="left">
				<span id="span"></span>
				<input type="button" value="登出" onclick="loginOut()"/>
				<ul id="ul">
					<li class="active">msg</li>
					<li>friend</li>
				</ul>
				<div class="clear">

				</div>

				<div id="item">

					<div id="msg" class="active">

					</div>
					<div id="friend">
						<input type="text" id="friendname" />
						<input type="button" value="添加好友" onclick="addFriend()" />
						<div id="friendlist">
						</div>
					</div>
				</div>
			</div>
			<div id="right">
			</div>
		</div>
		<script src="js/jmessage-sdk-web-2.1.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/Cookie.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var lis = document.getElementsByTagName("li");
			var divs = document.getElementById("item").children;
			var JIM = new JMessage();
			var username;
			var pwd;
			var fid;
			var uid;
			var $right = $("#right");
			window.onload = function() {
				init();
			}
			for (var i = 0; i < lis.length; i++) {
				(function(ix) {
					lis[ix].onclick = function() {
						for (var h = 0; h < lis.length; h++) {
							divs[h].className = "";
							lis[h].className = "";
						}
						divs[ix].className = "active";
						lis[ix].className = "active";
					}
				})(i)
			}

			function loginOut() {
				JIM.loginOut();
			}
			//登陆
			function login() {
				JIM.login({
					'username': username,
					'password': pwd
				}).onSuccess(function(data) {
					console.log("登陆成功");
					console.log('success:' + JSON.stringify(data));
					$("#span").html("username:" + username);
					getFriendList();
					JIM.onMsgReceive(function(data) {
						var data1 = JSON.stringify(data.messages[0].content.from_id);
						var data2 = JSON.stringify(data.messages[0].content.msg_body.text);
						data1 = data1.replace(/"/g, '');
						data2 = data2.replace(/"/g, '');
						console.log('from_id:' + data1 + 'text' + data2);
						if ($("#" + data1 + "_main").length > 0) {
							$("#" + data1 + "_main").show();
						} else {
							$right.append("<div id='" + data1 + "_main'><p>" + data1 + "</p><div id='" + data1 + "_talking' class='right_talking'></div><textarea id='right_area' rows='7' cols='60'></textarea><input type='button'  value='发送' onclick='sendAcrossSingleMsg()' />  </div>")
						}
						$("#" + data1 + "_talking").append("<div class='shou'>" + data1 + ":<br />" + data2 + " </div>");
					});
					JIM.onEventNotification(function(data) {
						console.log('event_receive: ' + JSON.stringify(data.from_username));
						uid = JSON.stringify(data.from_username);
						$("#msg").append("<div>" + uid + "请求添加你为好友<br/><input type='button' value='同意' onclick='addFriends()'></div>");
					});
				}).onFail(function(data) {
					console.log("登陆失败");
					console.log('error:' + JSON.stringify(data));
				}).onTimeout(function(data) {
					console.log("登陆超时");
					console.log('timeout:' + JSON.stringify(data));
				});
			}
			//初始化
			function init() {
				JIM.init({
					"appkey": "239a00294f23757f90151429",
					"random_str": "022cd9fd995849b58b3ef0e943421ed9",
					"signature": "D97C2DDA3E46E5E6D482E9E8EE84AF93",
					"timestamp": "1467967210887"
				}).onSuccess(function(data) {
					//初始化成功后
					getCookie();
					login();
					//					console.log('success:' + JSON.stringify(data));
				}).onFail(function(data) {
					console.log('error:' + JSON.stringify(data))
				});
			}
			//得到好友列表
			function getFriendList() {
				JIM.getFriendList().onSuccess(function(data) {
					$("#friendlist").html("");
					console.log('success:' + JSON.stringify(data.friend_list));
					var json = data.friend_list;
					for (var i in json) {
						$("#friendlist").append($("<div class='flist' id='" + json[i].username + "'>" + json[i].username + "</div>"));
						$(".flist").each(function() {
							$(this).click(function() {
								$id = $(this).attr("id");
								fid = $id;
								var $right = $("#right");
								$right.children().hide();
								$this = $("#" + $id + "_main");
								if ($this.length > 0) {
									$this.show();
								} else {
									$right.append("<div id='" + $id + "_main'><p>" + $id + "</p><div id='" + $id + "_talking' class='right_talking'></div><textarea id='right_area' rows='7' cols='60'></textarea><input type='button'  value='发送' onclick='sendAcrossSingleMsg()' />  </div>")
								}
							})
						})
					}
				}).onFail(function(data) {
					console.log('error:' + JSON.stringify(data));
				});
			}
			//添加好友				
			function addFriend() {
				var friendname = document.getElementById("friendname").value;
				console.log(friendname);
				JIM.addFriend({
					'appkey': '239a00294f23757f90151429',
					'target_name': friendname,
					'from_type': '1',
					'why': 'hi,friend'
				}).onSuccess(function(data) {
					console.log('success:' + JSON.stringify(data));
				}).onFail(function(data) {
					console.log('error:' + JSON.stringify(data));
				});
			}
			function addFriends() {
				uid=uid.replace(/"/g, "");
				console.log(uid);
				JIM.addFriend({
					'appkey': '239a00294f23757f90151429',
					'target_name': uid,
					'from_type': '1',
					'why': 'hi,friend'
				}).onSuccess(function(data) {
					console.log('success:' + JSON.stringify(data));
				}).onFail(function(data) {
					console.log('error:' + JSON.stringify(data));
				});
				getFriendList();
			}

			function sendAcrossSingleMsg() {
				var mail = $("#right_area").val();
				$("#" + fid + "_talking").append("<div class='sendmsg'>" + mail + "</div>")
				JIM.sendSingleMsg({
					'target_username': fid,
					'target_nickname': fid,
					'content': mail,
					'appkey': "239a00294f23757f90151429"
				}).onSuccess(function(data) {
					console.log('success:' + JSON.stringify(data));
				}).onFail(function(data) {
					console.log('error:' + JSON.stringify(data));
				});
			}
		</script>
	</body>

</html>